<template>
  <body id="poster">
    <el-form
      :model="LoginForm"
      class="loginContainer"
      label-position="left"
      label-width="0px"
    >
      <h3 class="loginTitle">登录</h3>
      <el-form-item label="">
        <el-input
          class="loginInput"
          type="text"
          v-model="LoginForm.userName"
          placeholder="账号"
          prefix-icon="el-icon-user"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-input
          class="loginInput"
          type="password"
          v-model="LoginForm.password"
          placeholder="密码"
          prefix-icon="el-icon-lock"
          clearable
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button id="login" type="primary" v-on:click="login">
          登录
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-button id="register" type="primary" @click="toRegister()">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </body>
</template>

<script>
import apiConfig from "../config/apiConfig";
import axios from 'axios'; // 确保引入 axios

export default {
  name: "Login",
  data() {
    return {
      LoginForm: {
        userName: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      console.log("login!", this.LoginForm); // 添加日志以调试

      // 设置请求头
      const headers = {
        'Content-Type': 'application/json'
      };

      axios.post(apiConfig.login, this.LoginForm, { headers })
        .then((res) => {
          let data = res.data;
          // 登录成功后
          if (data.code == 200) {
            //清空下表单
            this.LoginForm = {};
            //提示
            this.$message({
              message: "登录成功",
              type: "success",
              duration: 1000,
              center: true,
              // 跳转
              onClose: () => {
                this.$router.push("/home");
              },
            });
          }
        })
        .catch(error => {
          console.error('登录失败:', error); // 添加错误处理
        });
    },
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>

<style>
#login {
  width: 100%;
  background-color: #505458;
  border: none;
}
#register {
  width: 100%;
  background-color: #505458;
  border: none;
}
#poster {
  background-image: url("../assets/img/微信图片_20250113173503.jpg");
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
  padding: 0px;
}
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #ffffffbd;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
/* 自定义 el-input 选中时的边框颜色 */
.el-input.loginInput .el-input__inner:focus {
  border-color: #505458; /* 修改为你想要的颜色 */
  outline: 0; /* 去掉默认的聚焦轮廓 */
}
</style>